<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body {
        padding: 50px;
    }
    
    .mydiv {
        height: 300px;
        width: 300px;
        border: 1px solid #ccc;
        margin-bottom: 20px;
        display: inline-block;
    }
    
    .case1 {
        background: linear-gradient(#fb3, #58a);
    }
    
    .case2 {
        background: linear-gradient(#fb3 20%, #58a 80%);
    }
    /* 因为渐变是一种由代码生成的图像，我们能像对待其他任何背景图像那
样对待它，而且还可以通过background-size 来调整其尺寸： */
    
    .case3 {
        background: linear-gradient(#fb3 50%, #58a 50%) no-repeat;
        background-size: 100% 30px;
    }
    /* 如果我们把第二个色标的位置值设置为0，那它的位置就
总是会被浏览器调整为前一个色标的位置值，这个结果正是我们想要的。
因此， */
    
    .case4 {
        background: linear-gradient(#fb3 30%, #58a 0);
        background-size: 100% 30px;
    }
    /* 垂直条纹 */
    
    .case5 {
        background: linear-gradient(to right, /* 或 90deg */
        #fb3 50%, #58a 0);
        background-size: 30px 100%;
    }
    
    .case6 {
        background: linear-gradient(135deg, #fb3 50%, #58a 0);
        background-size: 100% 30px;
    }
    /* 斜向条纹
    单个贴片包含了四条条纹，而不是两条，只有这样才有可能做到无缝拼接 */
    /* 我们成功地创建了斜向条
纹，但这些条纹看起来要比我们在前面制作的水平和垂直条纹细一些。为了
理解这其中的道理，我们需要再次回忆起在学校里学过的勾股定理 */
    
    .case7 {
        background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
        background-size: 42.426406871px 42.426406871px;
    }
    /* 更好的斜向条纹 */
    /* 在前面的段落中展示的方法还不够灵活 只能45都 */
    /* 一个鲜为人知的真
相是linear-gradient() 和radial-gradient() 还各有一个循环式的加强
版：repeating-linear-gradient() 和repeating-radial-gradient()。
它们的工作方式跟前两者类似，只有一点不同：色标是无限循环重复的，直 
到填满整个背景。*/
    
    .case8 {
        /* background: repeating-linear-gradient(45deg, #fb3, #58a 30px); */
        background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
    }
    /* 它相当于下面这个简单的线性渐变：
background: linear-gradient(45deg,
#fb3, #58a 30px,
#fb3 30px, #58a 60px,
#fb3 60px, #58a 90px,
#fb3 90px, #58a 120px,
#fb3 120px, #58a 150px, ...); */
    
    .case9 {
        background: repeating-linear-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px);
    }
    /* 灵活的同色系条纹
    幸运的是，还有一种更好的方法：不再为每种条纹单独指定颜色，而是
    把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来
    得到浅色条纹： */
    
    .case10 {
        background: #58a;
        background-image: repeating-linear-gradient(30deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px, transparent 0, transparent 30px);
    }
</style>

<body>
    <div class="mydiv case1"></div>
    <div class="mydiv case2"></div>
    <div class="mydiv case3"></div>
    <div class="mydiv case4"></div>
    <div class="mydiv case5"></div>
    <div class="mydiv case6"></div>
    <div class="mydiv case7"></div>
    <div class="mydiv case8"></div>
    <div class="mydiv case9"></div>
    <div class="mydiv case10"></div>
</body>

</html>